<template>
  <div class="app">
    <div class="song-list">
      <el-table
        :data="songList"
        height="300px"
        stripe
        style="width: 100%"
        size="small"
        v-loading="isLoading"
      >
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button-group>
              <el-button
                size="mini"
                type="success"
                icon="el-icon-thumb"
                circle
                @click="addSong(scope.row)"
              ></el-button>
              <el-button
                size="mini"
                type="warning"
                icon="el-icon-video-play"
                circle
                @click="playSong(scope.row)"
              ></el-button>
            </el-button-group>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="歌曲"> </el-table-column>
        <el-table-column prop="artist" label="歌手"> </el-table-column>
        <el-table-column prop="album" label="点歌人"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      isLoading: false,
      songList: [],
      room_id: false,
      lastApp: "",
    };
  },
  watch: {
    "$store.state.roomInfo": {
      handler(roomInfo) {
        this.room_id = roomInfo ? roomInfo.room_id : false;
        if (this.room_id) {
          this.getSongList();
        }
      },
      immediate: true,
      deep: true,
    },
    "$store.state.nowApp": {
      handler(nowApp) {
        if (nowApp.key === "room_song" && nowApp.key !== this.lastApp) {
          this.getSongList();
        }
        this.lastApp = nowApp.key;
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  methods: {
    getSongList() {
      this.isLoading = true;
      this.request({
        url: "room/songList",
        method: "POST",
        data: {
          room_id: this.room_id,
        },
        success: (res) => {
          this.songList = res.data;
        },
        final: () => {
          this.isLoading = false;
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.app {
  display: flex;
  flex: 1;
  width: 100%;
  color: #333;
  text-shadow: none;
  flex-direction: column;
  .song-search {
    padding: 10px;
  }
  .song-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    .el-table {
      flex: 1;
    }
    .el-pagination {
      padding: 10px;
      text-align: right;
    }
  }
}
</style>